<script setup>
  import axios from 'axios'
  import {ref, reactive} from 'vue'

  let content = ref("")
  let message = reactive({
    content:"",
    code:1
  })

  function getLoveMessage(){
    /**
     * 使用axios发送请求获取土味情话
     * axios({设置请求的参数}) 请求三要素 1、请求的url 2、请求的方法 3、请求的参数 keycalue json ....
     */
    let promise = axios({
      method:"post",
      url:"https://api.uomg.com/api/rand.qinghua",
      // params:{
      //   /**
      //    * get  params中的数据会放在url之后
      //    */
      //    format:"json",
      //    username:"gwc"
      // },
      data:{
        /**
         * post data中的数据会以json形式放入请求体
         */
         format:"json",
         username:"gwc"
      }
    })

    // 处理响应值
    promise.then(
      function(response){
        console.log(response)
        /**
         * response 响应结果对象
         * data 服务端响应回来的数据
         * status 响应状态码 200
         * statusText 响应状态描述 
         * headers 本次响应的所有响应头
         * config 本次请求的配置信息
         * request 本次请求发送时使用XMLHttpRequest对象
         */
        console.log(response.data)
        console.log(response.data.code) 
        console.log(response.data.content)
        content.value = response.data.content
        // message.content = response.data.content
        // 将后面的同名属性赋值给前边对象，属性必须同名
        Object.assign(message, response.data)

      }
    ).catch(
      function(error){
        console.log(error)
      }
    )

  }

</script>

<template>
  <div>
    <h1 v-text="content"></h1>
    <button @click="getLoveMessage()">土味情话</button>
    <h1 v-text="message.content"></h1>
  </div>

</template>

<style scoped>

</style>
